<template>
  <div>
    <div style="text-align:right" v-if="$hasPermission('widget:kpi:designKPISettings')">
      <el-button size="small" @click="openDialog"
        type="primary">{{ $t('custom.component.gadget.kpi.designSettings') }}</el-button>
    </div>
    <div v-loading="loading">
      <UserFormMaking v-if="visible" ref="userFormMaking" @updateDataId="updateDataId" :visible="visible"
        @envent="envent" :userformData="userformDialogData"></UserFormMaking>
    </div>
    <AddOrEditForm v-if="addOrEditFormVisible" :dataId="setting.dataId" :isAdd="false" @closeDialog="closeDialog"
      ref="addOrEditForm">
    </AddOrEditForm>
  </div>
</template>

<script>
import AddOrEditForm from './add_or_edit_form.vue'
import UserFormMaking from '@/components/form-making/userFormMaking.vue'
export default {
  name: 'chartGridKpiSetting',
  components: {
    AddOrEditForm,
    UserFormMaking,
  },
  data () {
    return {
      addOrEditFormVisible: false,
      setting: {
        dataId: '',
        formCode: ''
      },
      userformDialogData: {
        isNew: true,
        formTitle: null,
        formCode: null,
        id: null
      },
      loading: true,
      visible: false
    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
    'setting.formCode' (val) {
      if (val) {
        this.getFormDataList();
      }
    },

  },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    getData () {
      return {
        dataId: this.setting.dataId,
        formCode: this.setting.formCode
      }
    },
    updateSetting (value, list, layerStatus) {
      this._.merge(this.setting, value.gadgetSetting)
      this.$emit('update:data', this.setting)
    },
    openDialog () {
      this.addOrEditFormVisible = true
      this.$nextTick(() => {
        this.$refs['addOrEditForm'].dataForm.formCode = this.setting.formCode
        this.$refs['addOrEditForm'].init()
      })
    },
    closeDialog () {
      this.visible = false
      this.loading = true
      this.getFormDataList()
    },
    async getFormDataList () {
      const params = { current: 1, size: 9999, desc: 'create_time', formCode: this.setting.formCode }
      const { data: res } = await this.$interface.reports.getFormDataListApi(params);
      if (res.data.records.length > 0 && res.data.records.find(v => v.id === this.setting.dataId)) {
        this.userformDialogData = {
          isNew: false,
          formTitle: 'KpiSettings',
          formCode: this.setting.formCode,
          id: this.setting.dataId,
        }
      } else {
        this.userformDialogData = { isNew: true, formCode: this.setting.formCode, formTitle: 'KpiSettings' }
      }
      this.visible = true
      this.loading = false
    },
    envent () {
      this.$emit('envent')
    },
    setKpiSettings () {
      this.loading = true
      if(this.$refs.userFormMaking){
        return this.$refs.userFormMaking.addOrUpdateFormData()
      }
    },
    updateDataId (dataId) {
      this.setting.dataId = dataId
      this.loading = false
    }
  }
}
</script>

<style lang="scss">

</style>
